<template>
    <div class="mine">
        <div class="box">
            <div class="top">
                <van-icon name="setting-o" size="36px" />
            </div>
            <div class="img">
                <van-image round width="80px" height="80px"
                    src="https://ts1.cn.mm.bing.net/th/id/R-C.35b010b4d32a6517cea4a21b53940a8a?rik=ETERo7siGwjtEQ&riu=http%3a%2f%2fc.hiphotos.baidu.com%2fzhidao%2fpic%2fitem%2f3812b31bb051f8190c90b7fadab44aed2f73e7cd.jpg&ehk=q6Wpu75B%2bz7BQht7g9khkvF2NuJa8Ltq4xJoMoqbvSU%3d&risl=&pid=ImgRaw&r=0" />
                <div class="name">
                    <span>{{ userInfos.nickname }}</span>
                    <span>(积分：{{ userInfos.scores }})</span>
                    <div>{{ userInfos.phone }}</div>
                </div>
            </div>
            <div class="act">
                <div>
                    <van-icon name="calendar-o" size="36px" class="item" />
                    <div>签到</div>
                </div>
                <div>
                    <van-icon name="star-o" size="36px" class="item" />
                    <div>收藏</div>
                </div>
                <div>
                    <van-icon name="location-o" size="36px" class="item" />
                    <div>足迹</div>
                </div>
            </div>
        </div>
        <div class="box1">
            <van-cell title="我的订单" is-link to="/cart" value="查看全部订单" />
        </div>
        <div class="box2">
            <div>
                <van-icon name="after-sale" size="36px" class="item" />
                <div>代付款</div>
            </div>
            <div>
                <van-icon name="logistics" size="36px" class="item" />
                <div>待收货</div>
            </div>
            <div>
                <van-icon name="edit" size="36px" class="item" />
                <div>待评价</div>
            </div>
            <div>
                <van-icon name="exchange" size="36px" class="item" />
                <div>退/换货</div>
            </div>
        </div>
        <div class="box3">
            <van-cell title="我的服务" />
        </div>
        <div class="box2">
            <div>
                <van-icon name="phone-o" size="36px" class="item" />
                <div>客服</div>
            </div>
            <div>
                <van-icon name="friends-o" size="36px" class="item" />
                <div>好友</div>
            </div>
            <div>
                <van-icon name="info-o" size="36px" class="item" />
                <div>攻略</div>
            </div>
            <div>
                <van-icon name="records-o" size="36px" class="item" />
                <div>反馈</div>
            </div>
        </div>

    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import useUserStore from '@/store/user'
import { getUserInfo } from '@/api/login-register'

const store = useUserStore()

const userInfos = ref()

const fetchUserInfo = async () => {
    const result: any = await getUserInfo(store.token)
    console.log('用户信息：', result)
    userInfos.value = result.userInfo
}
fetchUserInfo()
</script>

<style lang="less" scoped>
.top {
    width: 36px;
    height: 36px;
    background-color: rgb(249, 99, 45);
    position: absolute;
    right: 0px;
    top: 0px;
}

:deep(.van-icon) {
    float: right;
}

.box {
    position: relative;
    box-sizing: border-box;
}

.box1 {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}

:deep(.van-cell__title) {
    font-size: 16px;
    font-weight: bold;
}

.box2 {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid gray;
    margin-bottom: 10px;
}

.box3 {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}

.act {
    width: 220px;
    height: 70px;
    background-color: white;
    position: absolute;
    top: 160px;
    left: 77px;
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
    z-index: 99;
    border-radius: 6px;
}

.item {
    font-size: 12px;
}

.img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200px;
    background-color: rgb(249, 99, 45);
    border-radius: 0 0 30% 30%;
    margin-bottom: 40px;
}

:deep(.van-image__error) {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.name {
    font-size: 18px;
    font-weight: bold;
    color: white;
    margin-left: 10px;
}
</style>
